<template>
  <view class="travel-explore">
    <!-- 头部区域 -->
    <view class="header">
      <view class="welcome-section">
        <view class="user-info">
          <image src="/static/images/avatar.jpg" mode="aspectFill" class="avatar" />
          <text class="greeting">Hello Vanshika</text>
        </view>
        <text class="title">Explore the\nBeautiful world!</text>
      </view>
      
      <!-- 搜索栏 -->
      <view class="search-section">
        <view class="search-bar">
          <view class="search-input">
            <image src="/static/images/search-icon.png" mode="aspectFit" class="search-icon" />
            <text class="placeholder">Search Places</text>
          </view>
        </view>
        <view class="filter-button">
          <image src="/static/images/filter-icon.png" mode="aspectFit" class="filter-icon" />
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 旅行地点部分 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Travel Places</text>
          <view class="show-more">
            <text class="show-more-text">Show more</text>
            <image src="/static/images/arrow-right.png" mode="aspectFit" class="arrow-icon" />
          </view>
        </view>
        
        <!-- 分类标签栏和地点列表容器 -->
        <view class="places-section">
          <view class="category-tabs">
            <view class="tab-item">
              <text class="tab-text">All</text>
            </view>
            <view class="tab-item">
              <text class="tab-text">Latest</text>
            </view>
            <view class="tab-item active">
              <view class="active-indicator"></view>
              <text class="tab-text">Popular</text>
            </view>
          </view>
          
          <!-- 地点列表 -->
          <swiper class="places-container" :indicator-dots="true" :autoplay="false" :circular="true" :duration="300">
            <swiper-item v-for="(place, index) in places" :key="index">
              <place-card 
                :place="place"
                :is-saved="isPlaceSaved(place.id)"
                @click="handlePlaceClick(place)"
                @save="handlePlaceSave(place)"
              />
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 我的行程部分 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">My Schedule</text>
          <view class="show-more" @click="navigateToSchedule">
            <text class="show-more-text">Show more</text>
            <image src="/static/images/arrow-right.png" mode="aspectFit" class="arrow-icon" />
          </view>
        </view>
        
        <!-- 行程卡片 -->
        <ScheduleCard 
          v-for="(schedule, index) in schedules" 
          :key="index"
          :schedule="schedule"
          @click="handleScheduleClick(schedule)"
        />
      </view>
    </view>
  </view>
</template>

<script>
import BottomNav from '@/components/BottomNav.vue'
import PlaceCard from '@/components/PlaceCard.vue'
import ScheduleCard from '@/components/ScheduleCard.vue'

export default {
  name: 'TravelExplorePage',
  components: {
    BottomNav,
    PlaceCard,
    ScheduleCard
  },
  data() {
    return {
	  isNavigating: false,
      currentPath: '/pages/explore/TravelExplorePage',
      places: [
        {
          id: 1,
          image: '/static/images/rome.jpg',
          price: '$750',
          name: 'City Rome',
          location: 'Italy',
          duration: '5 Days'
        },
        {
          id: 2,
          image: '/static/images/santorini.jpg',
          price: '$850',
          name: 'Santorini Island',
          location: 'Greece',
          duration: '5 Days'
        }
      ],
      schedules: [
        {
          id: 1,
          image: '/static/images/mount-albrus.jpg',
          status: 'Upcoming',
          title: 'Mount Albrus',
          location: 'Italy',
          date: 'May 15-20, 2024'
        }
      ],
      savedPlaces: []
    }
  },
  methods: {
    isPlaceSaved(placeId) {
      return this.savedPlaces.includes(placeId)
    },
    handlePlaceClick(place) {
	  console.log('跳转 detail 页', Date.now());
	  this.isNavigating=true
      uni.navigateTo({
        url: `/pages/detail/TravelDetailPage?id=${place.id}&type=place`,
        success: () => {
          console.log('Successfully navigated to place detail')
        },
        fail: (err) => {
          console.error('Navigation failed:', err)
          // 如果导航失败，显示提示
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        },
		complete() {
			setTimeout(() => {
			            this.isNavigating = false;
			          }, 300);
		}
      })
    },
    handlePlaceSave(place) {
      const index = this.savedPlaces.indexOf(place.id)
      if (index === -1) {
        this.savedPlaces.push(place.id)
      } else {
        this.savedPlaces.splice(index, 1)
      }
    },
    handleScheduleClick(schedule) {
	  console.log('跳转 detail 页', Date.now());
	  this.isNavigating=true
      uni.navigateTo({
        url: `/pages/detail/TravelDetailPage?id=${schedule.id}&type=schedule`,
        success: () => {
          console.log('Successfully navigated to schedule detail')
        },
        fail: (err) => {
          console.error('Navigation failed:', err)
          // 如果导航失败，显示提示
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        },
		complete() {
			setTimeout(() => {
			            this.isNavigating = false;
			          }, 300);
		}
      })
    },
    navigateToSchedule() {
      uni.switchTab({
        url: '/pages/schedule/TravelSchedulePage',
        success: () => {
          console.log('Successfully switched to schedule tab')
        },
        fail: (err) => {
          console.error('Tab switch failed:', err)
          uni.showToast({
            title: '页面切换失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style>
.travel-explore {
  font-family: 'Poppins', sans-serif;
  background-color: #FFFFFF;
  min-height: 100vh;
  padding: 20px;
}

.header {
  margin-bottom: 30px;
  padding: 20px;
}

.welcome-section {
  margin-bottom: 24px;
}

.user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  object-fit: cover;
}

.greeting {
  font-size: 15px;
  font-weight: 600;
  color: #000000;
}

.title {
  font-size: 32px;
  font-weight: 600;
  color: #000000;
  line-height: 1.2;
  white-space: pre-line;
}

.search-section {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.search-bar {
  flex: 1;
  background-color: #F0F0F0;
  border-radius: 16px;
  padding: 16px;
}

.search-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.search-icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

.placeholder {
  font-size: 15px;
  color: #89807A;
}

.filter-button {
  width: 56px;
  height: 56px;
  background: #24C690;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-icon {
  width: 24px;
  height: 24px;
}

.location-icon{
	width: 20px;
	height: 20px;
}

.section {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 20px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #000000;
}

.show-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.show-more-text {
  font-size: 13px;
  color: #89807A;
}

.arrow-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.places-section {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 0 20px;
}

.category-tabs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}

.tab-item {
  position: relative;
  padding: 4px 0;
}

.tab-text {
  font-size: 13px;
  font-weight: 600;
  color: #89807A;
}

.tab-item.active .tab-text {
  color: #24C690;
}

.active-indicator {
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background-color: #24C690;
  border-radius: 1.5px;
}

.places-container {
  flex: 1;
  height: 300px;
  width: 100%;
}

.place-card {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0px 4px 33px rgba(0, 0, 0, 0.08);
}

.place-image-container {
  position: relative;
  width: 100%;
  height: 180px;
}

.place-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  padding: 8px 16px;
  border-radius: 20px;
}

.price-text {
  font-size: 13px;
  font-weight: 600;
  color: #000000;
}

.save-button {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.save-icon {
  width: 16px;
  height: 16px;
}

.place-info {
  padding: 16px;
}

.place-name {
  font-size: 15px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
}

.place-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.place-location {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.location-text {
  font-size: 13px;
  color: #89807A;
}

.duration-tag {
  background: #F0F0F0;
  padding: 6px 12px;
  border-radius: 12px;
}

.duration-text {
  font-size: 13px;
  color: #89807A;
}

/* 我的行程卡片样式 */
.my-schedule-card {
  background: #F0F0F0;
  border-radius: 18px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.schedule-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.schedule-thumbnail {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
}

.schedule-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schedule-title {
  font-size: 13px;
  font-weight: 600;
  color: #000000;
}

.schedule-location {
  display: flex;
  align-items: center;
  gap: 4px;
}

.location-icon {
  width: 12px;
  height: 12px;
}

.location-text {
  font-size: 10px;
  font-weight: 600;
  color: #89807A;
}

.joined-button {
  background: #24C690;
  padding: 6px 16px;
  border-radius: 26px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
}

.joined-text {
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
}

/* 底部菜单栏样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.05);
  border-top: 1px solid #F5F5F5;
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  position: relative;
}

.nav-icon {
  width: 28px;
  height: 28px;
  transition: all 0.3s ease;
}

.nav-text {
  font-size: 12px;
  font-weight: 500;
  color: #89807A;
  transition: all 0.3s ease;
}

.nav-item.active {
  transform: translateY(-2px);
}

.nav-item.active .nav-text {
  color: #26C992;
  font-weight: 600;
}

.nav-item.active .nav-icon {
  opacity: 1;
  transform: scale(1.1);
}

.nav-item:not(.active) .nav-icon {
  opacity: 0.5;
}

.nav-item:active {
  transform: scale(0.95);
}

/* 调整内容区域，为底部菜单留出空间 */
.content {
  padding-bottom: 90px;
}
</style> 